{% extends "baseMenu.html" %}

{% block content %}
<table style="text-align: left; height: 100%; border: 3px solid rgb(0,0,0); padding:10px; box-shadow: 0px 0px 10px 10px rgba(70,70,70, 0.4) inset;background-color:rgb(255,255,255);">
	<tbody>
		<tr><td>Seleccione la Linea y la parada</td></tr>
	  	<tr style="text-align: left; height: 20%; width: 100%;">
		  	<td><form name = "formPrediccion" action="" method="post">{% csrf_token %}
		  		<label for="id_linea"> Linea: </label> {{ form.linea }} 
		        <SELECT NAME="lineaCombo" SIZE=1 onchange="document.formPrediccion.id_linea.value = document.formPrediccion.lineaCombo.options[document.formPrediccion.lineaCombo.selectedIndex].value;document.formPrediccion.lineaCombo.value=document.formPrediccion.lineaCombo.options[document.formPrediccion.lineaCombo.selectedIndex].value;this.form.submit()">
		        	<OPTION VALUE="">Seleccione un valor</OPTION> 
		            {% for route in routeList %}
		            <OPTION {% if linea and  linea == route.linea %} SELECTED {% endif %}VALUE="{{ route.linea }}">{{ route.linea }}</OPTION>
		            {% endfor %}
		            </SELECT>
				{% if linea %}
				<br />
				<label for="id_orden"> Parada: </label> {{ form.orden }}     
		        <SELECT NAME="paradaCombo" SIZE=1 onchange="document.formPrediccion.id_orden.value = document.formPrediccion.paradaCombo.options[document.formPrediccion.paradaCombo.selectedIndex].value;document.formPrediccion.paradaCombo.value=document.formPrediccion.paradaCombo.options[document.formPrediccion.paradaCombo.selectedIndex].value">
					<OPTION VALUE="">Seleccione un valor</OPTION>
					{% for stop in stopList %}
					<OPTION VALUE="{{ stop.orden }}">{{ stop.orden }}</OPTION>
					{% endfor %}
	            </SELECT>
	            <br />
	            <label for="id_apto"> Vehiculo Especial: </label>{{ form.apto }}
	            <br />
	            <BUTTON type="submit" name="action" value="prediction">Predecir</BUTTON>
	            {% endif %}
		    </form></td>
	  	</tr>
	  	{% if error %}<tr><td style="text-align: center;"><font color="red" size=2>Error: {{ error }}</font></td></tr>{% endif %}
</tbody></table>
{% endblock %}
